<template>
    <div class="rms-container">
        <!-- 顶部导航栏 -->
        <div class="top-header">
            <div class="header-left">
                <h1 class="system-title">后台管理系统</h1>
            </div>
            <div class="header-right">
                <span class="user-info">家族管理员：{{ userStore.userInfo.nickname }}</span>
            </div>
        </div>

        <!-- 主体内容区域 -->
        <div class="main-content">
            <!-- 左侧导航栏 -->
            <div class="sidebar">
                <div class="nav-menu">
                    <div v-for="item in menuItems" :key="item.key"
                        :class="['menu-item', { active: activeMenu === item.key }]" @click="switchMenu(item.key)">

                        <span class="menu-text">{{ item.title }}</span>
                    </div>
                </div>
            </div>

            <!-- 右侧内容区域 -->
            <div class="content-area">
                <!-- 面包屑导航 -->
                <div class="breadcrumb">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item>后台管理</el-breadcrumb-item>
                        <el-breadcrumb-item>{{ getCurrentMenuTitle() }}</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>

                <!-- 内容区域 -->
                <div class="page-content">
                    <!-- 使用 router-view 显示子路由组件 -->
                    <router-view :family_id="family_id" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import useUserStore from '@/stores/modules/user'
const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
// 当前激活的菜单
const activeMenu = ref('gift')
const family_id = ref()

// 菜单项配置
const menuItems = [
    { key: 'gift', title: '礼物管理' },
    { key: 'memorial', title: '纪念馆审核' },
    { key: 'member', title: '成员审核' },
    { key: 'message', title: '留言管理' },
    { key: 'article', title: '文章管理' },
    { key: 'recharge', title: '客户消费记录' },
    { key: 'consumption', title: '提现记录' }
]

// 切换菜单 - 使用路由跳转
const switchMenu = (key: string) => {
    router.push({
        path: `/RMS/${key}`,
        query: route.query // 保持现有的查询参数
    })
}

// 监听路由变化，更新当前激活菜单
watch(() => route.path, (newPath) => {
    const pathSegments = newPath.split('/')
    if (pathSegments[1] === 'RMS' && pathSegments[2]) {
        // 处理嵌套路由，如 /RMS/article/edit/123
        const menuKey = pathSegments[2]
        if (menuItems.some(item => item.key === menuKey)) {
            activeMenu.value = menuKey
        }
    }
}, { immediate: true })

// 获取当前菜单标题
const getCurrentMenuTitle = () => {
    const item = menuItems.find(item => item.key === activeMenu.value)
    return item ? item.title : ''
}
onMounted(() => {
    if(route.query.family_id){
        family_id.value = route.query.family_id
    }
})
</script>

<style scoped>
.rms-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
}

/* 顶部导航栏 */
.top-header {
    height: 60px;
    /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
    background-color: #667eea;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-left .system-title {
    color: white;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.header-right .user-info {
    color: white;
    font-size: 14px;
}

/* 主体内容区域 */
.main-content {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* 左侧导航栏 */
.sidebar {
    width: 200px;
    background: white;
    border-right: 1px solid #e6e6e6;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
}

.nav-menu {
    padding: 20px 0;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.menu-item:hover {
    background-color: #f8f9fa;
    border-left-color: #667eea;
}

.menu-item.active {
    background-color: #e8f4fd;
    border-left-color: #667eea;
    color: #667eea;
}

.menu-text {
    font-size: 14px;
    font-weight: 500;
}

/* 右侧内容区域 */
.content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 面包屑导航 */
.breadcrumb {
    padding: 15px 20px;
    background: white;
    border-bottom: 1px solid #e6e6e6;
}

/* 页面内容 */
.page-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

/* 模块内容 */
.module-content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.module-header {
    padding: 20px;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.module-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.filter-bar {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* 表格容器 */
.table-container {
    padding: 0 20px 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .sidebar {
        width: 150px;
    }
}
</style>